<template>
  <el-dialog
    :show-close="showClose"
    :draggable="draggable"
    :model-value="show"
    :close-on-click-modal="false"
    class="cust-dialog"
    :top="top + 'px'"
    :width="width"
    @close="close"
  >
    <!-- <template #header="{ close, titleId, titleClass }">
      <div v-if="title" class="title">{{ title }}</div>
      <slot v-else name="header"></slot>
    </template> -->

    <div class="dialog-body" :style="{ 'max-height': maxHeight + 'px', padding: padding + 'px' }">
      <slot></slot>
    </div>
    <template v-if="(buttons && buttons.length > 0) || showCancel">
      <div class="dialog-footer">
        <el-button @click="close" v-if="showCancel">取消</el-button>
        <el-button
          v-for="(btn, index) in buttons"
          :key="index"
          :type="btn.type || 'primary'"
          @click="btn.click"
        >
          {{ btn.text }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, withDefaults } from 'vue'

interface PropsType {
  show?: boolean // 是否显示对话框
  showClose?: boolean // 是否显示关闭按钮
  draggable?: boolean // 是否可拖动
  showCancel?: boolean // 是否可以通过点击 modal 关闭
  top?: number // 顶部距离
  width?: string // 宽度
  title?: string // 标题
  buttons?: Array<{ type: 'primary' | 'default'; text: string; click: (e?: any) => void }> // 按钮配置
  padding?: number // 内边距
}

const props = withDefaults(defineProps<PropsType>(), {
  show: false,
  showClose: true,
  draggable: true,
  showCancel: true,
  top: 50,
  width: '30%',
  title: '',
  buttons: () => [],
  padding: 15
})

const emit = defineEmits(['close'])

const close = () => {
  emit('close')
}

const maxHeight = window.innerHeight - props.top - 120
</script>

<style lang="less" scoped>
.cust-dialog {
  padding: 0px !important;
  margin-bottom: 5px !important;
  .el-dialog__header {
    padding: 16px;
  }
  .title {
    font-size: 20px;
  }
  .dialog-body {
    min-height: 80px;
    overflow: auto;
    overflow-x: hidden;
    padding: 20px;
  }
  .dialog-footer {
    border-top: 1px solid #ddd;
    text-align: right;
    padding: 5px 20px;
  }
}
</style>
